<template>
    <ul class="ticket-timeline-wrap">
        <Spin size="large" fix v-show="opening"></Spin>
        <li
            v-for="(item, key) in timeList"
            :key="key"
            class="ticket-timeline-item">
            <h2 class="ticket-timeline-title">{{item.type | opreateType}}</h2>
            <div class="ticket-timeline-timestamp">
                <div class="ticket-timeline-line"></div>
                {{item.created_at | date}}
            </div>

            <div class="ticket-timeline-detail" @mouseenter="enter(item.type)" @mouseleave="leave">
                <div>
                    <span>
                        [{{item.from_role | roleType}}]
                        {{ showName(item.from_role, item.from_name) }}
                    </span>
                    <span>{{item.type | opreateType}}</span>
                    <span v-if="item.to_name">
                        给
                        [{{item.to_role | roleType}}]
                        {{ showName(item.to_role, item.to_name) }}
                    </span>
                    <span v-show="item.description">，原因：{{item.description}}贺卡是大客户的卡号快点哈客户端安航空大客户第五和短裤和点卡第三款</span>
                </div>
            </div>
            <div class="ticket-timeline-hh" v-if="item.type===kk" @mouseenter="enter(item.type)" @mouseleave="leave">
                <div class="ticket-timeline-as">
                    <span>
                        [{{item.from_role | roleType}}]
                        {{ showName(item.from_role, item.from_name) }}
                    </span>
                    <span>{{item.type | opreateType}}</span>
                    <span v-if="item.to_name">
                        给
                        [{{item.to_role | roleType}}]
                        {{ showName(item.to_role, item.to_name) }}
                    </span>
                    <span  v-show="item.description">，原因：{{item.description}}贺卡是大客户的卡号快点哈客户端安航空大客户第五和短裤和点卡第三款贺卡是大客户的卡号快点哈客户端安航空大客户第五和短裤和点卡第三款贺卡是大客户的卡号快点哈客户端安航空大客户第五和短裤和点卡第三款贺卡是大客户的卡号快点哈客户端安和点卡第三款贺卡是大客户的卡号快点哈客户端安</span>
                </div>
            </div>
        </li>
    </ul>
</template>

<script>
/**
 * 工单-工单列表-展开详情组件
 */
/**
 * 显示操作人姓名电话
 * 操作人: 客服/商户 调度员
 */
export default {
  name: 'workflow-list',
  props: {
    type: Number,
    list: Array,
    opening: Boolean
  },
  data () {
    return {
      kk: null
    }
  },
  computed: {
    timeList () {
      return this.list ? this.list.sort((a, b) => this.timeValue(a.created_at) - this.timeValue(b.created_at)) : []
    }
  },
  methods: {
    timeValue (time) {
      return +new Date(time)
    },
    showName (role, name) {
      if (+role <= 14 && +role > 0) return ''
      return name
    },
    enter (id) {
      this.kk = id
    },
    leave () {
      this.kk = null
    }
  },
  filters: {
    opreateType (type) {
      return {
        1: '创建工单',
        2: '指派工单',
        3: '指派工单',
        4: '提交工单',
        5: '工单已通过验收',
        6: '取消工单',
        7: '打回工单',
        8: '确定上门时间',
        9: '对工单进行了修改',
        10: '驳回工单验收'
      }[+type]
    },
    roleType (id) {
      return (
        {
          0: '系统',
          1: '超级管理员',
          2: '系统管理员',
          3: '运营',
          4: '商务负责人',
          5: '中区负责人',
          6: '商务',
          7: '服务负责人',
          8: '服务工程师',
          9: '技术支持',
          10: '客服',
          11: '财务(后台)',
          12: '交付管理员',
          13: '调度',
          14: '师傅'
        }[+id] || '客户'
      )
    }
  }
}
</script>

<style lang="less" scoped>
.active{
    display: block        
}
.ticket-timeline {
    &-wrap {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        min-height: 145px;
        background: #fff;
        border: 1px solid #dddee1;
        border-radius: 4px;
        border-top: none;
        list-style: none;
        font-size: 14px;
        font-weight: 100;
        overflow: hidden;
    }
    &-title {
        margin-top: 30px;
        font-size: 18px;
    }
    &-timestamp {
        position: relative;
        width: 100%;
        padding-top: 10px;
        padding-bottom: 20px;
        margin-bottom: 20px;
        &::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            bottom: -2px;
            left: 50%;
            // border: 2px solid #39BAE8;
            border-radius: 50%;
            background-color: #05bac5;
            transform: translate(-50%, 6px);
        }
    }
    &-line {
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 50%;
        border-bottom: 2px solid #bbbec4;
    }

    &-item {
        position: relative;
        width: calc(100% / 5);
        text-align: center;
        &:last-child .ticket-timeline-line {
            border-bottom: 1px dashed #bbbec4;
        }
    }
    &-detail,&-hh {
        width: 80%;
        padding: 10px;
        color: #fff;
        height: 62px;
        line-height: 24px;
        overflow: hidden;
        background-color: #05bac5;
        border-radius: 4px;
        margin: 0 auto 30px;
        display: flex;
        align-items:flex-start;
        justify-content: center;
    }
    &-hh {
        height: 216px;
        margin: 2px auto 30px;
        align-items: center;
        overflow: auto;
        position: absolute;
        top:0;
        left: 10%
    }
    &-as {
        padding-top:30px
    }
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar
{
    width: 2px;
    height: 16px;
    background-color: #F5F5F5;
}
 
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px #dddee1;
    border-radius: 10px;
    background-color: #F5F5F5;
}
 
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb
{
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px #dddee1;
    background-color: #555;
}
</style>